import React, { Component } from "react";
import "./Sample.css";
import NavBar from "./NavBar";
import QuickStart from "./spreadContainer/QuickStart";
import SpreadSheetsCon from "./spreadContainer/SpreadSheetsCon";
import WorkSheetCon from "./spreadContainer/WorkSheetCon";
import SheetGC from "./spreadContainer/SheetGC";
import ColumnCon from "./spreadContainer/ColumnCon";
import DataBingingCon from "./spreadContainer/DataBingingCon";
import StyleCon from "./spreadContainer/StyleCon";
import OutlineCon from "./spreadContainer/OutlineCon";

class Sample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            activeIndex: 7,
            spreadCom: [
                { id: 0, label: "快速入门指南", cmp: <QuickStart /> },
                { id: 1, label: "GC-Spread-Sheets", cmp: <SpreadSheetsCon /> },
                { id: 2, label: "GC-Worksheet", cmp: <WorkSheetCon /> },
                { id: 3, label: "GC-Column", cmp: <ColumnCon /> },
                { id: 4, label: "数据绑定", cmp: <DataBingingCon /> },
                { id: 5, label: "样式", cmp: <StyleCon /> },
                { id: 6, label: "分组", cmp: <OutlineCon /> },
                { id: 7, label: "公车管理测试", cmp: <SheetGC /> },
                { id: 8, label: "性能演示", cmp: <div className="componentContainer">待集成</div> },
            ],
        };
    }

    changeActiveIndex(index) {
        this.setState({
            activeIndex: index,
        });
    }

    render() {
        let spreadCom = this.state.spreadCom[this.state.activeIndex].cmp;

        return (
            <div className="app-container">
                <Header />
                <div className="body-container">
                    <NavBar
                        activeIndex={this.state.activeIndex}
                        navs={this.state.spreadCom}
                        changeActiveIndex={(index) => {
                            this.changeActiveIndex(index);
                        }}
                    />
                    {spreadCom}
                </div>
                <Footer />
            </div>
        );
    }
}

class Header extends Component {
    render() {
        return (
            <div className="app-header">
                <img className="logo" src="./img/logo.png" alt="logo" />
                <span className="header-text">SpreadJS React 示例</span>
            </div>
        );
    }
}

class Footer extends Component {
    render() {
        return (
            <div className="app-footer">
                <span className="footer-text">Copyright© GrapeCity, inc. All Rights Reserved.</span>
            </div>
        );
    }
}

export default Sample;
